<!--消息通知页面-->
<template>
<div class="container" v-if="showNotice === 0">
   <div class="tipsStyle" :style="{ 'backgroundImage':'url('+ bgUrl+')' }">
     <div class="tips_r"><span>{{weatherInfo.temperature}}°</span></div>
      <div class="tips_m">
        <div class="tips_l">
          <span>{{weatherInfo.cityInfo}}</span>
          <span>{{weatherInfo.weather}}</span>
          <span>{{weatherInfo.wind_direction}}</span>
        </div>
        <div class="tips_t">{{webSocketMsg.content}}</div>
      </div>
    </div>
</div>
</template>
<script>
import Utils from "@/libs/Utils.js"
export default {
    name: "notification",
    props: {
        webSocketMsg: {
            type: Object
        }
        
    },
    data() {
        return {
               weatherInfo:{},
               showNotice:false,
               bgList:{
                 '晴':require('../../../assets/img/1.png'),
                 '雨':require('../../../assets/img/2.png'),
                 '雪':require('../../../assets/img/3.png'),
                 '阴':require('../../../assets/img/4.png'),
                 '云':require('../../../assets/img/5.png'),
               },
               bgUrl:require('../../../assets/img/noticebg1.png')
        }
    },
    mounted() {
       // this.getWeatherInfo();
    },
    methods: {

        //版本对比,进行版本更新
         async getWeatherInfo() {
         
          var _this = this;
          const res =  await _this.$http.get(`/psys-business-service/api/external/pointlineplane/${this.$version}/getweather?appid=80454&mysecret=2110039993ab42368c2d8e54b052fda9&lng=119.45&lat=32.20`);

           if(false){
              var data = res.data.data.weather.showapi_res_body.now;
              var cityData = res.data.data.weather.showapi_res_body.cityInfo;

              var weatherInfo = {}
              weatherInfo.weather_pic = data.weather_pic;//天气图片
              weatherInfo.weather = data.weather;//天气情况
              Object.keys(this.bgList).forEach(el=>{
                if(weatherInfo.weather.includes(el)){
                  this.bgUrl=this.bgList[el]
                }
              })
              weatherInfo.temperature = data.temperature;//温度
              weatherInfo.wind_direction = data.wind_direction;//风向
              weatherInfo.cityInfo = cityData.c5 + " "+ cityData.c3 ;//城市信息
              weatherInfo.wind_power = data.wind_power;//风级
              _this.weatherInfo = weatherInfo;
              console.log(111111,res);  
               _this.showNotice = true;
               setTimeout(function(){
                 _this.showNotice = false;
               },5000)
          }    
          
            
        }
    }
}
</script>

<style lang="less" scoped>

.tipsStyle{
    width: 300px;
    padding:10px 30px ;
    /* height: 200px; */
    z-index: 9999;
    display: block;
    position: absolute;
    top: 80px;
    right: 5px;
    // background-image:url('../../../assets/img/noticebg1.png');
    background-repeat: no-repeat;
    color: #fff;
    animation-name:mymove;
    animation-duration:2s;

    /* Safari and Chrome */
     -webkit-animation-name:mymove;
    -webkit-animation-duration:2s;
    background-size: 100% 100%;
}
.tips_t{
  font-size: 18px;
  margin-top: 35px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align:center;
}
.tips_m{
  margin-top: 10px;
  justify-content: space-between;
  align-items: center;
}
.tips_l{
  font-size:14px ;
  flex-direction: column;
  text-align: center;
}
.tips_l>span{
    height: 26px;
    align-items: center;
    position: relative;
}
.tips_l img{
  width: 26px;
  position: absolute;
  top: 6px;
  left: 20px;
}
.tips_r{
    font-size: 70px;
    text-align: center;
    color: #fff;
    margin-top: 20px;
}
@keyframes mymove
{
from {top:0px;}
to {top:80px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:80px;}
}
</style>
